<template>
  <div class="addform">
    <h1>荣誉详情</h1>
    <br />
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-position="right"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="荣誉名称:" prop="hpTitle">
        <el-input v-model="ruleForm.hpTitle" class="inputS"></el-input>
      </el-form-item>
      <el-form-item label="幽默标题:" prop="hpHtitle">
        <el-input v-model="ruleForm.hpHtitle" class="inputS"></el-input>
      </el-form-item>
      <el-form-item label="发奖单位:" prop="hpUnit">
        <el-input v-model="ruleForm.hpUnit" class="inputS"></el-input>
      </el-form-item>
      <el-form-item label="获奖类别:" prop="hpCategory">
        <el-select v-model="ruleForm.categoryValue" placeholder="请选择">
          <el-option
            v-for="item in ruleForm.hpCategory"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="获奖时间段:" prop="hpDate">
        <el-input v-model="ruleForm.hpDate" class="inputS"></el-input>
      </el-form-item>
      <el-form-item label="获奖等级:" prop="hpLevel">
        <el-select v-model="ruleForm.levelValue" placeholder="请选择">
          <el-option
            v-for="item in ruleForm.hpLevel"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="奖项介绍:" prop="hpCon">
        <el-input
          type="textarea"
          v-model="ruleForm.hpCon"
          :rows="4"
          class="inputL"
        ></el-input>
      </el-form-item>

      <!-- 图片1 -->
      <el-form-item label="上传图片1:">
        <el-image
          class="imgPreview"
          :src="this.imgUrl+ruleForm.hpImg1"
          fit="cover"
          @click="Pview(ruleForm.hpImg1)"
          title="浏览大图"
        ></el-image>
        <el-upload
          :action="this.upload2Hp"
          list-type="picture-card"
          ref="upload"
          :on-success="handleAvatarSuccess"
        >
          <i class="el-icon-plus"></i>
          <div class="el-upload__tip" slot="tip">
            只能上传jpg/png文件，且不超过20mb
          </div>
        </el-upload>
      </el-form-item>
      <!-- 图片2 -->
      <el-form-item label="上传图片2:">
        <el-image
          class="imgPreview"
          :src="this.imgUrl+ruleForm.hpImg2"
          fit="cover"
          @click="Pview(ruleForm.hpImg2)"
          title="浏览大图"
        ></el-image>
        <el-upload
          :action="this.upload2Hp"
          list-type="picture-card"
          ref="upload"
          :on-success="handleAvatarSuccess"
        >
          <i class="el-icon-plus"></i>
          <div class="el-upload__tip" slot="tip">
            只能上传jpg/png文件，且不超过20mb
          </div>
        </el-upload>
      </el-form-item>
      <!-- 图片3 -->
      <el-form-item label="上传图片3:" prop="piSiSecond">
        <el-image
          class="imgPreview"
          :src="this.imgUrl+ruleForm.hpImg3"
          fit="cover"
          @click="Pview(ruleForm.hpImg3)"
          title="浏览大图"
        ></el-image>
        <el-upload
          :action="this.upload2Hp"
          list-type="picture-card"
          ref="upload"
          :on-success="handleAvatarSuccess"
        >
          <i class="el-icon-plus"></i>
          <div class="el-upload__tip" slot="tip">
            只能上传jpg/png文件，且不超过20mb
          </div>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">
          修改信息
        </el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 修改成功提示 -->
    <el-dialog
      title="温馨提示"
      :visible.sync="successVisible"
      width="20%"
      @close="resetForm(ruleForm)"
      append-to-body
    >
      <div class="dialogSuc">
        <el-button
          type="success"
          icon="el-icon-check"
          circle
          @click="successVisible"
        ></el-button>
        <h2>修改成功,3秒后跳转</h2>
      </div>
    </el-dialog>
    <!-- 图片预览 -->
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      successVisible: false,
      ruleForm: {
        hpLevel: [{
          value: '国级',
          label: '国级'
        }, {
          value: '省级',
          label: '省级'
        }, {
          value: '市级',
          label: '市级'
        }, {
          value: '校级',
          label: '校级'
        }, {
          value: '大众级',
          label: '大众级'
        }],
        levelValue: '',
        hpCategory: [{
          value: 1,
          label: '科技'
        }, {
          value: 2,
          label: '文艺'
        }, {
          value: 3,
          label: '体育'
        }],
        categoryValue: '',
      },
      rules: {//如果没输入的提示信息
        hpTitle: [
          { required: true, message: "请输入荣誉标题", trigger: "blur" },
          { max: 30, message: "最大长度30个字", trigger: "blur" },
        ],
        hpHtitle: [
          { required: true, message: "请输入幽默标题", trigger: "blur" },
          { max: 30, message: "最大长度30个字", trigger: "blur" },
        ],
        hpUnit: [
          { required: true, message: "请输入发奖单位", trigger: "blur" },
          { max: 50, message: "最大长度50个字", trigger: "blur" },
        ],
        hpCategory: [
          { required: true, message: "请选择获奖类别", trigger: "blur" }
        ],
        hpDate: [
          { required: true, message: "请输入获奖日期时间段", trigger: "blur" }
        ],
        hpLevel: [
          { required: true, message: "请选择获奖等级", trigger: "blur" }
        ],
      },
    };
  },
  created() {
    console.log("进入修改个人奖项页面");
    const _this = this;
    console.log(_this.$route.params.Id);
    this.axios({
      method: "get",
      url: _this.baseUrl + "/index2/get/index2Hp/" + _this.$route.params.Id,
    }).then(function (resp) {
      console.log(resp.data);
      _this.ruleForm = resp.data
      _this.ruleForm.hpImg1 =resp.data.hpImg1;
      _this.ruleForm.hpImg2 =resp.data.hpImg2;
      _this.ruleForm.hpImg3 =resp.data.hpImg3;
      _this.ruleForm.levelValue=resp.data.hpLevel;
      _this.ruleForm.categoryValue=resp.data.hpCategory;
    });
  },
  methods: {
    // 预览 无需管
    Pview(url) {
      url=this.imgUrl+url;
      console.log(url);
      this.dialogImageUrl =url;
      this.dialogVisible = true;
    },
    // 上传图片判断
    beforeAvatarUpload(idx, file) {
      console.log(idx, file);
      const isLt10M = file.size / 1024 / 1024 < 10;
      console.log("文件大小:" + (file.size / 1024 / 1024).toFixed(2) + "MB");
      if (!isLt10M) {
        this.$message.error("上传图片大小不能超过 10MB!");
        if (idx == 1) {
          this.$refs.upload1.clearFiles();
        }
        if (idx == 2) {
          this.$refs.upload2.clearFiles();
        }
        if (idx == 3) {
          this.$refs.upload3.clearFiles();
        }
      } else {
        if (idx == 1) {
          this.$refs.upload1.submit();
        }
        if (idx == 2) {
          this.$refs.upload2.submit();
        }
        if (idx == 3) {
          this.$refs.upload3.submit();
        }
      }
      return isLt10M;
    },
    //上传
    handleAvatarSuccess(idx, res, file) {
      console.log(idx, res, file);
      this.disabled = true;
      if (idx == 1) {
        this.ruleForm.hpImg1 = "/assets/myIndex2/img/" + file.name;
        console.log("图片1:" + this.ruleForm.hpImg1);
      }
      if (idx == 2) {
        this.ruleForm.hpImg2 = "/assets/myIndex2/img/" + file.name;
        console.log("图片2:" + this.ruleForm.hpImg2);
      }
      if (idx == 3) {
        this.ruleForm.hpImg3 = "/assets/myIndex2/img/" + file.name;
        console.log("图片3:" + this.ruleForm.hpImg3);
      }
    },
    submitForm(formName) {
      this.ruleForm.hpCategory=this.ruleForm.categoryValue;
      this.ruleForm.hpLevel=this.ruleForm.levelValue;
      console.log(this.ruleForm)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 由于axios内部必须使用_this才能使用this
          const _this = this;
          this.axios({
            method: "post",
            url: _this.baseUrl + "/index2/post/editHp",
            //传递给后端的数据
            data: _this.ruleForm
          }).then(function (resp) {
            console.log(resp.data);
            _this.successVisible = true;//提交成功提示
            // 修改成功后3秒跳转
            setTimeout(function () {
              _this.$router.push("/main/index2Hp");
            }, 3000);
          });
        } else {
          console.log("修改失败");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs.upload1.clearFiles();
      this.$refs.upload2.clearFiles();
      this.$refs.upload3.clearFiles();
      this.ruleForm.levelValue="";
      this.ruleForm.categoryValue="";
      this.$refs[formName].resetFields();
    }
  },
};
</script>

<style lang="less" scoped>
.addform {
  width: 80%;
  margin: 0 auto;
  .inputS {
    width: 80%;
  }
  .inputL {
    width: 80%;
    display: block;
  }
  .imgPreview {
    width: 150px;
    height: 150px;
    margin-right: 15px;
    float: left;
    cursor: pointer;
  }
}
</style>